<template>
  <el-select v-model="selected" @change="input" v-bind="$attrs" :multiple="multiple" :clearable="clearable">
   <el-option v-for="(item, index) in option" :label="item.label" :value="item.value" :key="index"></el-option>
  </el-select>
</template>
<script>
  import {
    getDictData,
    sourceTestList
  } from '@/api/custom/formDesigner'
  export default {
    data() {
      return {
        option: [],
        selected: ''
      }
    },
    props: ['dataType',
      'tableName',
      'fieldName',
      'saveFieldName',
      'dictName',
      'options',
      'value',
      'multiple',
      'clearable'
    ],
    watch: {
      value(val) {
        if (this.multiple && val) {
            let itemLst = []
            if (Array.isArray(val)) {
                itemLst = [...val]
            } else {
                itemLst = (val + '').split(',')
            }
            this.selected = [...itemLst]
        } else {
            if ((val??'') !== '') {
                this.selected = val
            }else{
              this.selected = ''
            }
        }
      },
      options() {
        if (this.dataType === 'static') {
          this.option = this.options?.map(newObj => {
                return {
                    ...newObj,
                    value: (newObj.value??'') !== '' ? (typeof this.selected === 'number' ? Number(newObj.value) : newObj.value + '') : newObj.value
                }
            }) || []
        }
      },
      dataType: {
        handler() {
          let val = this.dataType
          if (val === 'static') { //静态数据
            this.option = this.options?.map(newObj => {
                return {
                    ...newObj,
                    value: (newObj.value??'') !== '' ? (typeof this.selected === 'number' ? Number(newObj.value) : newObj.value + '') : newObj.value
                }
            }) || []
          } else if (val === 'dictionary') { //字典数据
            this.option = []
            if (this.dictName !== '') {
              this.getDictDatas() //获取字典数据
            }
          } else { //动态数据
            this.option = []
            this.getDataSourceOption() //获取数据源数据
          }
          if (this.multiple && this.value) {
            let itemLst = []
            if (Array.isArray(this.value)) {
                itemLst = [...this.value]
            } else {
                itemLst = (this.value + '').split(',')
            }
            const labels = []
            itemLst.forEach(item => {
                this.option.forEach(obj => {
                    if (obj.value + '' === item + '' || obj.label === item + '') {
                        labels.push(obj.label)
                    }
                })
            })
                this.selected = [...labels]
            } else {
                if ((this.value??'') !== '') {
                    this.selected = this.value + ''
                }
            }
        },
        immediate: true
      },
      dictName: {
        handler() {
          this.option = []
          if (this.dictName !== '') {
            this.getDictDatas() //获取字典数据
          }
        }
      },
      fieldName: {
        handler() {
            this.getDataSourceOption() //获取数据源数据
        }
      },
      saveFieldName: {
        handler() {
            this.getDataSourceOption() //获取数据源数据
        }
      }
    },
    created () {
        if (this.dataType === 'datasource') {
            this.option = [...this.options]
        }
    },
    methods: {
      input(val) {
        this.$emit('input', val)
        this.$emit('change', val)
      },
      async getDataSourceOption(){
        this.option = []
        if (this.tableName && this.fieldName && this.saveFieldName) {
            const rsp = await sourceTestList(this.tableName)
            if (rsp.code === 0) {
                this.option = rsp.data?.rowMaps.map((item)=>{
                    return {
                        label:item[this.fieldName],
                        value:(item[this.saveFieldName]??'') !== '' ? (typeof this.selected === 'number' ? Number(item[this.saveFieldName]) : item[this.saveFieldName] + '') : item[this.saveFieldName]
                    }
                })
            }
        }
      },
      //获取字典数据
      getDictDatas() {
        getDictData({
          dictType: this.dictName
        }).then((res) => {
          if (res.code === 0) {
            res.data.forEach((item) => {
              this.option.push({
                label: item.label,
                value: (item.value??'') !== '' ? (typeof this.selected === 'number' ? Number(item.value) : item.value + '') : item.value
              })
            })
            if (this.value) {
                let itemLst = []
                if (Array.isArray(this.value)) {
                    itemLst = [...this.value]
                } else {
                    itemLst = (this.value + '').split(',')
                }
                const labels = []
                itemLst.forEach(item => {
                    this.option.forEach(obj => {
                        if (obj.value + '' === item + '' || obj.label === item + '') {
                            labels.push(obj.value)
                        }
                    })
                })
                if (this.multiple) {
                    this.selected = [...labels]
                } else {
                    this.selected = labels.join('')
                }
            }
          }
        }).catch(e => {
          console.log(e)
        })
      }
    }
  }

</script>
